<template>
  <div :class="popu ? 'box1' : 'box2'" ref="popu">
      <img :src="$store.state.play_img" class="before" ref="bgimg">
    <div class="music_box">
        <div class="img_box">
            <div :class="$store.state.playstate ? 'img1':'img1-1'">
                <img src="../../assets/imgs/music/2.png" alt="">
            </div>
             <div class="img2 img">
                <div :class="$store.state.playstate ? 'rotate':'stop'">
                    <img src="../../assets/imgs/music/1.png" alt="">
                    <img class="music_img" :src="$store.state.play_img" alt="">
                </div>
            </div>
        </div>
    </div>

    <div class="lyr_box">
        <div class="lyr">
            <ul class="list">
                <li v-for="(val,index) in lyrs" :key="index" :class="lyrIndex ==  index ? 'li1' : 'li'">
                    {{val.lyr}}
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
const index = 0
let time
const flag = true
const scrollHeight1 = 0
export default {
  data () {
    return {
      popu: true,
      lyrs: [],
      li: [],
      lyrIndex: 2,
      scrollTop: 0,
      timeout: null,
      musicdata: []
    }
  },
  mounted () {
    this.$bus.$on('lyrs', (songs, data) => {
      this.lyrs = []
      this.popu = !this.popu

      this.musicdata = songs
      // console.log(data,33333333333333333)

      const p = new Promise((resolve, reject) => {
        this.regRex(data)
        resolve()
      })
      p.then(() => {
        this.liheight()
      })
    })
  },
  methods: {
    regRex (str) {
      // var reg= /(ru)n(oob)/i
      // 获取歌词贡献者
      const regUser = /\[(.*)\]\n/igm

      const user = regUser.exec(str)
      // str=str.substring(user[0].length,str.length);

      // 匹配歌词
      const reg = /\[(.*)\](.*)\n/igm
      let res
      while (res = reg.exec(str)) {
        this.lyrs.push({ time: this._timeForm(res[1]), lyr: res[2] })
      }
      console.log(this.lyrs)
    },

    _timeForm (time) {
      const index = time.indexOf(':')
      const min = time.substring(0, index)
      const seconds = time.substring(index + 1, time.length)
      return min * 60 + seconds * 1
    },

    liheight () {
      const ly = document.getElementsByClassName('lyr')[0]
      const ul = document.getElementsByClassName('list')[0]

      clearInterval(time)
      time = setInterval(() => {
        const time = Math.floor(this.$store.state.playTime)
        for (let i = 0; i < this.lyrs.length; i++) {
          if (time == Math.floor(this.lyrs[i].time)) {
            ly.scrollTop = (i - 2) * 35
            // ul.style.top ='-' + (i)*35 + 'px'
            this.lyrIndex = i
            // console.log(i,1111111)
          }
        }
      }, 200)
    },

    scrollTop1 () {
      const ly = document.getElementsByClassName('lyr_box')[0]
      const ul = document.getElementsByClassName('ul')[0]
      console.log(ly.scrollTop)
    }
  }
}
</script>

<style scoped>
.box1 {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  transition: all 0.35s;
  overflow: hidden;
  z-index: 99;

}
.box2 {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 998;
  top: 0;
  transition: all 0.35s;
  overflow: hidden;
}
.before {
    width: 100%;
    height: 100%;
    content: ' ';
    display: block;
    position: absolute;
    background-image: url('../../assets/imgs/music/109951167261891396.jpg');
    filter: blur(10px);
    transform: scale(1.25);
}

.music_box{
    width: 40%;
    height: 100%;
    float: left;
    position: relative;
}
.img_box{
    width: 60%;
    height: 60%;
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.img .rotate{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    transform: rotate(360deg);
    animation: a 300s infinite;
}
.img .stop{
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    transform: rotate(0deg);
    transition: all 0.5s;
}
@keyframes a{
    from {
         transform: rotate(0deg);
    }
    to{
         transform: rotate(3600deg);
    }
}
.img_box .img1{
    position: absolute;
    z-index: 5;
    top: 50px;
    right: 0px;
    transform-origin: 23px 5px;
    transform: rotate(10deg);
    transition: all 0.5s;
}
.img_box .img1-1{
    position: absolute;
    z-index: 5;
    top: 50px;
    right: 0px;
    transform-origin: 23px 5px;
    transform: rotate(-25deg);
    transition: all 0.5s;
}
.img_box .img2{
    width: 300px;
    height: 300px;
    background-color: #d6d2d3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}
.img2 img{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
}
.img2 .music_img{
    width: 200px;
    height: 200px;
    z-index: 1;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

.lyr_box {
  width: 30%;
  height: 100%;
  float: left;
  position: relative;

}
.lyr{
    width: 100%;
    height: 85%;
    overflow-y: scroll;
}
.lyr::-webkit-scrollbar{
    width: 3px;
}
.lyr::-webkit-scrollbar-thumb{
    background-color: #d8d8d8;
    border-radius: 10px;
}
.lyr .list{
    width: 90%;
    height: auto;
}
.list .li{
    width: 100%;
    line-height: 35px;
    text-align: center;
    color: #ffffff;
    font-size: 0.8rem;
}
.list .li1{
    width: 100%;
    line-height: 35px;
    text-align: center;
    font-weight: bold;
    transition: all 0.35s;
    background-image: linear-gradient(to right, #5433FF,#20BDFF,#A5FECB);
    -webkit-background-clip: text;
    color: transparent;
}
</style>
